<template>
    <div id="mainbox">
        <img id="headimgleft" src="../../assets/image/headimg.jpg" alt="">
        <h1>{{name}}</h1>
        <div id="lev">LV.{{lev}}</div>
        <div id="day">定居云隐{{day}} 天</div>
        <div id="num">累计听歌{{num}}首</div>
        <div id='des'>{{des}}</div>
    </div>
    <sheetback>
     <template v-slot:title>
         <span>播放历史</span>
     </template>
     <template v-slot:song>
         <usersong></usersong>
     </template>
    </sheetback>
</template>

<script>
import axios from 'axios'
import sheetback from '../sheet/sheetback.vue';
import usersong from './usersong.vue';
 
export default {
    name:"usermes",
    data(){
        return{
             name:'',
             num:'',
             lev:'',
             day:'',
             des:'',
        }

    },
    mounted:function(){
        this.load();
    },
    methods:{
            load(){
                let that=this;
                axios.get("http://39.101.203.189:3000/user/detail?uid="+ that.$store.state.id).then(function(response) {
                        console.log(response.data);
                        ('撤冷Saleng'==response.data.profile.nickname)?that.name='撒冷才不是小小蒙':that.name=response.data.profile.nickname;
                        that.lev=response.data.level;
                        that.num=response.data.listenSongs;
                        that.day=response.data.createDays;
                        that.des=response.data.profile.description;
                        that.des==''?that.des='该用户比较高冷，暂时没有更新签名': console.log(that.des='有描述');
                    }, function(err) {})
            }  
    },
    components:{
        sheetback,
        usersong,
    },

}
</script>

<style scoped> 
 #mainbox{position: relative;
    left:50px;
     width: 500px;
     height: 600px;
     color: aliceblue;
 }
 #headimgleft{
     position: relative;
     top:30px;
     width: 200px;
     height: 200px;
 }
 h1{
     position: relative;
     top:30px;
     font-weight: 300;
 }
 #lev{
     position: relative;
     top:30px;
     color: brown;
     font-size: 20px;
     width: 80px;
     height: 25px;
     border: solid 3px brown;
     text-align: center;
     border-radius: 20px;
     display: inline-block;
 }
 #day{
     position: relative;
     top:30px;
     left: 20px;
     color: rgb(136, 7, 7);
      display: inline-block;
 }
 #num{
     position: relative;
     top:55px;
     font-size: 20px;
 }
 #des{
     position: relative;
     top:80px;
     width: 400px;
     height: 280px;
      
 }
 

</style>